<template>
  <div :style="{ fontSize: fontSize + 'px' }" class="info_main">
    <span :style="{ marginRight: marginRightConsole + 'px' }" class="console" @click="handleToConsole">控制台</span>
    <a-dropdown v-if="currentUser && currentUser.name" class="dropdown" placement="bottomRight">
      <span class="ant-pro-account-avatar">
        <div style="display: inline-block"><a-icon :component="SvgIcon" style="fontSize: 32px" /></div>
        <div style="marginLeft: 10px; display: inline-block">{{ currentUser.name }}</div>
      </span>
      <template v-slot:overlay>
        <a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
          <a-menu-item v-if="menu" class="menu_info">
            <div class="menu_info_name">{{ currentUser.name }}</div>
            <div v-if="currentUser && currentUser.isAuth" class="menu_info_auth">
              <span style="float:left; color: #9498ab;">已认证</span>
            </div>
            <div v-else class="menu_info_auth">
              <span style="float:left; color: #9498ab;">未实名认证</span
              ><span style="float:right; color: #33b0ed;">立即认证</span>
            </div>
          </a-menu-item>
          <a-menu-item v-if="menu" key="countBean" class="menu_account menu_account_first">
            <img alt="example" class="menu_account_image" src="~@/assets/image/ui-icon/count-bean-user.png" />
            <span class="menu_account_item">算力豆</span>
            <span class="menu_account_message menu_account_bean">{{ currentUser.sldBalance || 0 }}</span>
          </a-menu-item>
          <a-menu-item v-if="menu" key="unpaidOrder" class="menu_account">
            <img alt="example" class="menu_account_image" src="~@/assets/image/ui-icon/unpaid-order-user.png" />
            <span class="menu_account_item">待支付订单</span>
            <span class="menu_account_message menu_account_un">{{ currentUser.unpaidOrder || 0 }}</span>
          </a-menu-item>
          <a-menu-item v-if="menu" key="unreadMessage" class="menu_account">
            <img alt="example" class="menu_account_image" src="~@/assets/image/ui-icon/unread-message-user.png" />
            <span class="menu_account_item">未读消息</span>
            <span class="menu_account_message menu_account_un">{{ currentUser.unreadMessage || 0 }}</span>
          </a-menu-item>
          <a-menu-item v-if="menu" key="center" class="menu_account menu_account_last" @click="handleToCenter">
            <img alt="example" class="menu_account_image" src="~@/assets/image/ui-icon/dropdown-user.png" />
            <span class="menu_account_item">用户中心</span>
          </a-menu-item>
          <a-menu-divider v-if="menu" />
          <a-menu-item key="logout" class="menu_logout" @click="handleLogout">
            退出登录
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <span v-else>
      <span class="login" @click="handleToLogin">登录</span>
      <a-button class="register" @click="handleToRegister">注册</a-button>
    </span>
  </div>
</template>

<script>
import { Modal } from 'ant-design-vue'
import SvgIcon from '@/assets/svg/UserCenter.svg'

export default {
  name: 'RightInfo',
  props: {
    currentUser: {
      type: Object,
      default: () => null
    },
    menu: {
      type: Boolean,
      default: true
    },
    marginRightConsole: {
      type: String,
      default: '40'
    },
    fontSize: {
      type: String,
      default: '14'
    }
  },
  data() {
    return {
      SvgIcon,
      imgUrl: require('../../assets/image/ui-icon/user.png')
    }
  },
  methods: {
    // 控制台
    handleToConsole() {
      this.$router.push({ path: '/console' })
    },
    // 登录
    handleToLogin() {
      this.$router.push({ path: '/user/login' })
    },
    // 注册
    handleToRegister() {
      this.$router.push({ path: '/user/register' })
    },
    // 用户中心
    handleToCenter() {
      this.$router.push({ path: '/account' })
    },
    // 退出登录
    handleLogout(e) {
      Modal.confirm({
        title: this.$t('layouts.usermenu.dialog.title'),
        content: this.$t('layouts.usermenu.dialog.content'),
        onOk: () => {
          return this.$store.dispatch('Logout').then(() => {
            this.$router.push({ name: 'home' })
          })
        },
        onCancel() {}
      })
      console.log(e)
    }
  }
}
</script>

<style lang="less" scoped>
@import '../index.less';
.info_main {
  height: 100%;
  display: flex;
  align-items: center;
}
.ant-pro-account-avatar {
  position: relative;
  display: flex;
  align-items: center;
}
.ant-pro-drop-down {
  width: 200px;
  height: 239px;
  background-color: #ffffff;
  padding: 0;
  margin: 0;
  /deep/ .action {
    margin-right: 8px;
  }
  /deep/ .ant-dropdown-menu-item {
    min-width: 160px;
    height: 32px;
    line-height: 32px;
    padding: 0 18px 0 10px;
    font-size: 12px;
  }
  .menu_info {
    width: 200px;
    height: 56px;
    background-color: #f7f8fc;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    cursor: default;
    .menu_info_name {
      height: 14px;
      width: 100%;
      text-align: left;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 14px;
      letter-spacing: 0px;
      color: #333333;
    }
    .menu_info_auth {
      height: 12px;
      width: 100%;
      font-size: 12px;
      line-height: 12px;
      margin-top: 6px;
    }
    .menu_info_auth:hover {
      cursor: pointer;
      color: @font-hover;
    }
  }
  .menu_account {
    .menu_account_image {
      width: 18px;
      height: 18px;
      margin-right: 7px;
    }
    .menu_account_item {
      height: 18px;
    }
    .menu_account_message {
      height: 18px;
      float: right;
    }
    .menu_account_bean {
      color: #5c5c5c;
    }
    .menu_account_un {
      color: #fa7321;
    }
  }
  .menu_account_first {
    margin-top: 10px;
  }
  .menu_account_last {
    margin-bottom: 10px;
  }
  .ant-dropdown-menu-item-divider {
    width: 200px;
    height: 1px;
    margin: 0;
    background-color: #f5f7f9;
  }
  .menu_logout {
    height: 34px;
    line-height: 34px;
    font-size: 12px;
    color: #333333;
    text-align: center;
  }
  .menu_logout:hover {
    cursor: pointer;
    color: @font-hover;
  }
}
.console:hover {
  cursor: pointer;
  color: @font-hover;
}
.login {
  margin-right: 20px;
}
.login:hover {
  cursor: pointer;
  color: @font-hover;
}
.register {
  width: 48px;
  height: 24px;
  background-color: #33b0ed;
  padding: 0;
  border-color: #33b0ed;
  border-radius: 2px;
  color: #ffffff;
}
.svgIcon {
  width: 50px;
  height: 50px;
}
</style>
